<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{path:'/ad_home'}">首页</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			<el-breadcrumb-item>用户列表</el-breadcrumb-item>
		</el-breadcrumb>

		<!--卡片视图区域-->
		<el-card>
			<!--搜索和添加区域-->
			<el-row :gutter="20">
				<el-col :span="15">
					<el-input
						placeholder="请输入要查询的员工id"
						v-model="queryInfo.id"
						clearable
					>
						<el-button
							slot="append"
							icon="el-icon-search"
							@click="getUser"
						></el-button>
					</el-input>
				</el-col>

				<!--添加按钮区-->
				<el-col :span="2">
					<el-button
						type="primary"
						@click="addDialogVisiable=true"
					>添加员工</el-button>
				</el-col>
				<!--删除按钮区-->
				<el-col :span="2">
					<el-button
						type="danger"
						@click="deleteDialogVisiable=true"
					>删除员工</el-button>
				</el-col>
				<!--修改按钮区-->
				<el-col :span="2">
					<el-button
						type="info"
						@click="modifyDialogVisiable=true"
					>修改员工</el-button>
				</el-col>
			</el-row>

			<!--用户列表区 挂载stafflist-->
			<el-table
				:data="stafflist"
				border
				stripe
			>
				<!--索引-->
				<el-table-column type="index"></el-table-column>
				<!--指定数据源!-->
				<el-table-column
					label="id"
					prop="Staff_id"
				>
				</el-table-column>

				<el-table-column
					label="员工姓名"
					prop="Staff_name"
				>
				</el-table-column>

				<el-table-column
					label="员工密码"
					prop="Staff_password"
				>
				</el-table-column>

				<el-table-column
					label="员工等级"
					prop="Staff_level"
				>
				</el-table-column>

				<el-table-column
					label="员工电话号"
					prop="Staff_telephone"
				>
				</el-table-column>

				<el-table-column
					label="员工工资"
					prop="Staff_salary"
				>
				</el-table-column>

				<el-table-column
					label="备注"
					prop="Staff_remarks"
				>
				</el-table-column>

			</el-table>
		</el-card>

		<!--用户查询区-->
		<div>员工资料查询区</div>
		<el-table
			:data="test_stafflist"
			border
			stripe
		>
			<!--指定数据源!-->
			<el-table-column
				label="id"
				prop="Staff_id"
			>
			</el-table-column>

			<el-table-column
				label="员工姓名"
				prop="Staff_name"
			>
			</el-table-column>

			<el-table-column
				label="员工密码"
				prop="Staff_password"
			>
			</el-table-column>

			<el-table-column
				label="员工等级"
				prop="Staff_level"
			>
			</el-table-column>

			<el-table-column
				label="员工电话号"
				prop="Staff_telephone"
			>
			</el-table-column>

			<el-table-column
				label="员工工资"
				prop="Staff_salary"
			>
			</el-table-column>

			<el-table-column
				label="备注"
				prop="Staff_remarks"
			>
			</el-table-column>
		</el-table>

		<!--按钮区域-->
		<!--添加用户对话框-->
		<el-dialog
			title="添加员工"
			:visible.sync="addDialogVisiable"
			width="50%"
			@close="addDialogClosed"
		>
			<!--新增用户时的显示信息主体区域-->
			<span>
				<el-form
					:model="addForm"
					:rules="addFormRules"
					width="50%"
					label-width="80px"
					ref="addFormRef"
				>
					<el-form-item
						label="员工id"
						prop="staff_id"
					>
						<el-input v-model="addForm.staff_id"></el-input>
					</el-form-item>

					<el-form-item
						label="员工姓名"
						prop="staff_name"
					>
						<el-input v-model="addForm.staff_name"></el-input>
					</el-form-item>

					<el-form-item
						label="员工密码"
						prop="staff_password"
					>
						<el-input v-model="addForm.staff_password"></el-input>
					</el-form-item>

					<el-form-item
						label="员工等级"
						prop="staff_level"
					>
						<el-input v-model="addForm.staff_level"></el-input>
					</el-form-item>

					<el-form-item
						label="员工电话"
						prop="staff_telephone"
					>
						<el-input v-model="addForm.staff_telephone"></el-input>
					</el-form-item>

					<el-form-item
						label="员工工资"
						prop="staff_salary"
					>
						<el-input v-model="addForm.staff_salary"></el-input>
					</el-form-item>

					<el-form-item
						label="备注"
						prop="staff_remarks"
					>
						<el-input v-model="addForm.staff_remarks"></el-input>
					</el-form-item>
				</el-form>
			</span>
			<!--底部区域-->
			<span
				slot="footer"
				class="dialog-footer"
			>
				<el-button @click="addDialogVisiable = false">取消</el-button>
				<el-button
					type="primary"
					@click="addStaff"
				>确定</el-button>
			</span>
		</el-dialog>

		<!--删除用户对话框-->
		<el-dialog
			title="删除员工"
			:visible.sync="deleteDialogVisiable"
			width="50%"
			@close="deleteDialogClosed"
		>
			<!--删除用户时的显示信息主体区域-->
			<span>
				<el-form
					:model="deleteForm"
					:rules="deleteFormRules"
					width="50%"
					label-width="80px"
					ref="deleteFormRef"
				>
					<el-form-item
						label="员工id"
						prop="staff_id"
					>
						<el-input v-model="deleteForm.staff_id"></el-input>
					</el-form-item>
				</el-form>
			</span>
			<!--底部区域-->
			<span
				slot="footer"
				class="dialog-footer"
			>
				<el-button @click="deleteDialogVisiable = false">取消</el-button>
				<el-button
					type="primary"
					@click="deleteStaff"
				>确定</el-button>
			</span>

		</el-dialog>

		<!--修改用户对话框-->
		<el-dialog
			title="修改员工"
			:visible.sync="modifyDialogVisiable"
			width="50%"
			@close="modifyDialogClosed"
		>
			<!--修改用户时的显示信息主体区域-->
			<span>
				<el-form
					:model="modifyForm"
					:rules="modifyFormRules"
					width="50%"
					label-width="80px"
					ref="modifyFormRef"
				>
					<el-form-item
						label="员工id"
						prop="staff_id"
					>
						<el-input v-model="modifyForm.staff_id"></el-input>
					</el-form-item>

					<el-form-item
						label="员工姓名"
						prop="staff_name"
					>
						<el-input v-model="modifyForm.staff_name"></el-input>
					</el-form-item>

					<el-form-item
						label="员工密码"
						prop="staff_password"
					>
						<el-input v-model="modifyForm.staff_password"></el-input>
					</el-form-item>

					<el-form-item
						label="员工等级"
						prop="staff_level"
					>
						<el-input v-model="modifyForm.staff_level"></el-input>
					</el-form-item>

					<el-form-item
						label="员工电话"
						prop="staff_telephone"
					>
						<el-input v-model="modifyForm.staff_telephone"></el-input>
					</el-form-item>

					<el-form-item
						label="员工工资"
						prop="staff_salary"
					>
						<el-input v-model="modifyForm.staff_salary"></el-input>
					</el-form-item>

					<el-form-item
						label="备注"
						prop="staff_remarks"
					>
						<el-input v-model="modifyForm.staff_remarks"></el-input>
					</el-form-item>
				</el-form>
			</span>
			<!--底部区域-->
			<span
				slot="footer"
				class="dialog-footer"
			>
				<el-button @click="modifyDialogVisiable = false">取消</el-button>
				<el-button
					type="primary"
					@click="modifyStaff"
				>确定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
export default{
	data(){
		return{
			queryInfo:{ //添加数据时候要用到
				id:'',
			},
			stafflist:[], //这里存放后端发送的员工数据
			test_stafflist:[],//存放要查询的员工的信息

			//控制添加员工的对话框
			addDialogVisiable:false,	//添加对话框
			modifyDialogVisiable:false,	//修改对话框
			deleteDialogVisiable:false,	//删除对话框

			//添加用户的表单数据
			addForm:{
				staff_id:"",
				staff_name:"",
				staff_password:"",
				staff_level:"",
				staff_telephone:"",
				staff_salary:"",
				staff_remarks:"",
			},


			//删除用户的表单数据
			deleteForm:{
				staff_id:"",
			},


			//添加用户的表单数据
			modifyForm:{
				staff_id:"",
				staff_name:"",
				staff_password:"",
				staff_level:"",
				staff_telephone:"",
				staff_salary:"",
				staff_remarks:"",
			},


			//添加表单的验证规则对象
			addFormRules:{
				staff_id:[
					{required:true,message:"请输入员工id",trigger:"blur"},
				],
				staff_name:[
					{required:true,message:"请输入员工姓名",trigger:"blur"},
				],
				staff_password:[
					{required:true,message:"请输入员工密码",trigger:"blur"},
				],
				staff_level:[
					{required:true,message:"请输入员工等级",trigger:"blur"},
				],
				staff_telephone:[
					{required:true,message:"请输入员工电话",trigger:"blur"},
				],
				staff_salary:[
					{required:true,message:"请输入员工工资",trigger:"blur"},
				],
				staff_remarks:[
					{required:true,message:"请输入备注",trigger:"blur"},
				],
			},


			//修改用户的表单数据
			//修改表单的验证规则对象
			modifyFormRules:{
				staff_id:[
					{required:true,message:"请输入员工id",trigger:"blur"},
				],
				staff_name:[
					{required:true,message:"请输入员工姓名",trigger:"blur"},
				],
				staff_password:[
					{required:true,message:"请输入员工密码",trigger:"blur"},
				],
				staff_level:[
					{required:true,message:"请输入员工等级",trigger:"blur"},
				],
				staff_telephone:[
					{required:true,message:"请输入员工电话",trigger:"blur"},
				],
				staff_salary:[
					{required:true,message:"请输入员工工资",trigger:"blur"},
				],
				staff_remarks:[
					{required:true,message:"请输入备注",trigger:"blur"},
				],
			},

			//删除用户的表单数据
			//删除表单的验证规则对象
			deleteFormRules:{
				staff_id:[
					{required:true,message:"请输入要删除的员工id",trigger:"blur"},
				],
			},

		}
	},
	created(){
		this.getUserList()
	},
	methods:{
		async getUserList(){ //挺重要的方法，请记住如何使用 通过这个函数得到后端的员工数据
			const {data:res} = await this.$http.post('ad_st_manager',{
				params: this.queryInfo
			})
			// if(res.code!="200"){
			// 	return this.$message.error("获取员工信息失败")
			// }
			console.log(res)
			console.log(this.queryInfo.id)
			this.stafflist = res.staffs	//将staffs存入到stafflist中
			console.log(this.stafflist) 
		},

		async getUser(){ //点击按钮，获取某一员工的信息
			console.log(this.queryInfo.id)
			const {data:res} =await this.$http.post('ad_st_manager_get',this.queryInfo) //向后端发送查询请求
			
			// if(res.code==="200"){
			// 	return this.$$message.error("查询成功")
			// }
			console.log(res)
			this.test_stafflist = res.staffs
			console.log(this.test_stafflist)
			this.$message.success("用户查询成功")
		},

		//监听添加用户对话框的关闭事件
		addDialogClosed(){
			this.$refs.addFormRef.resetFields()
		},

		//监听删除用户对话框的关闭事件
		deleteDialogClosed(){
			this.$refs.deleteFormRef.resetFields()
		},

		//监听修改用户对话框的关闭事件
		modifyDialogClosed(){
			this.$refs.modifyFormRef.resetFields()
		},

		//点击按钮，新增员工
		addStaff(){
			this.$refs.addFormRef.validate( async valid => {
				// console.log(valid)
				if (!valid) return
				//验证通过 可以添加
				const {data:res} = await this.$http.post("ad_st_manager_add", this.addForm)
				console.log(res)

				//this.$http.error("添加用户失败")
				if(res.code == "200"){
					this.$message.success("添加用户成功！")
				}else{
					this.$message.error("添加用户失败！")
				}
				
				//隐藏添加的对话框
				this.addDialogVisiable = false
				//刷新列表，重新获得后端数据库中数据
				this.getUserList()
			})
		},

		//点击按钮，删除员工
		deleteStaff(){
			this.$refs.deleteFormRef.validate( async valid => {
				// console.log(valid)
				if (!valid) return
				//验证通过 可以删除
				const {data:res} = await this.$http.post("ad_st_manager_delete", this.deleteForm)
				console.log(res)

				//this.$http.error("添加用户失败")
				if(res.code == "200"){
					this.$message.success("删除用户成功！")
				}else{
					this.$message.error("删除用户失败！")
				}
				
				//隐藏删除的对话框
				this.deleteDialogVisiable = false
				//刷新列表，重新获得后端数据库中数据
				this.getUserList()
			})
		},

		//点击按钮，修改对应员工
		modifyStaff(){
			this.$refs.modifyFormRef.validate( async valid => {
				// console.log(valid)
				if (!valid) return
				//验证通过 可以修改
				const {data:res} = await this.$http.post("ad_st_manager_modify", this.modifyForm)
				console.log(res)

				//this.$http.error("修改用户失败")
				if(res.code == "200"){
					this.$message.success("修改用户成功！")
				}else{
					this.$message.error("修改用户失败！")
				}
				
				//隐藏修改的对话框
				this.modifyDialogVisiable = false
				//刷新列表，重新获得后端数据库中数据
				this.getUserList()
			})
		}
	}
}
</script>
<style scoped>
</style>